<!--
 * @description  :先保书展示物品信息
 * @descriptionDetail:先保书展示物品信息
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-31 10:57:44
-->
<template>
  <view class="page">
    <view class="">
      <view style="margin: -6px -16px 0px -16px;">
        <u-gap :height="$theme.cm_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      </view>
      <view class="m-flex-row">
        <view style="width: calc(100% - 30px);">
          <form-section title="物品信息" iconColorClass="u-success"></form-section>
        </view>
        <view style="display: flex;flex-direction: row;align-items: center;">
          <u-icon name="reload" color="primary" size="40" v-if="hasDel" @click="queryData()">
          </u-icon>
        </view>
      </view>
      <!-- 先行物品登记清单 -->
      <view class="m-flex-row">
        <view class="u-font-28 total-tip">
          合计(总金额)<text>
            {{ goodsTotalPrice }}
          </text>元
        </view>
        <view class="u-font-28 total-tip">
          合计(数量)<text>
            {{ goodsTotalNum }}
          </text>
        </view>
      </view>
      <view class="">
        <u-table font-size="26" style="border-left: none;">
          <u-tr class="u-tr border-left">
            <u-th class="u-th" width="12%">
              {{ "序号" }}
            </u-th>
            <u-th width="28%" class="u-th">
              品牌规格
            </u-th>
            <u-th class="u-th">
              数量
            </u-th>
            <u-th class="u-th">
              单位
            </u-th>
            <u-th class="u-th">
              单价
            </u-th>
            <u-th class="u-th">
              合计
            </u-th>
          </u-tr>
          <m-list-view
            :normalScrollView="true"
            :i="0"
            :justScroll="true"
            :height="getListHeight()"
            :loadData="loadData"
            ref="mescrollRef0"
          >
            <u-tr class="u-tr border-left" :class="[d.index == 0 ? 'border-Top' : '']" slot-scope="d">
              <u-td class="u-td" width="12%">
                {{ d.index+1 }}
              </u-td>
              <u-td width="28%" class="u-td" style="color: #2979ff;">
                <text @click="itemDetail(d.data)">
                  {{ d.data.goodsName }}<!-- {{ d.data.spec ? d.data.spec + 'mm' : '' }} -->
                </text>
              </u-td>
              <u-td clas="u-td">
                {{ d.data.qty }}
              </u-td>
              <u-td class="u-td">
                {{ d.data.unit }}
              </u-td>
              <u-td class="u-td">
                {{ d.data.retailPrice }}
              </u-td>

              <u-td class="u-td">
                {{ priceInfo(d.data) }}
              </u-td>
            </u-tr>
          </m-list-view>
        </u-table>
      </view>
    </view>
    <u-popup mode="bottom" height="50%" v-model="detailShow">
      <view class="content" style="padding: 40rpx;">

        <u-form :label-position="labelPosition" :model="detailData" class="form-content" ref="uForm">

          <u-form-item
              label="品牌品规"
              :label-width="labelWidth"
              prop="party"
          >
            <u-input placeholder="请输入" input-align="right" :disabled="true" v-model="detailData.goodsName"  />
          </u-form-item>

          <u-form-item
              label="数量"
              :label-width="labelWidth"
              prop="party"
          >
            <u-input placeholder="请输入" input-align="right" :disabled="true" v-model="detailData.qty"  />
          </u-form-item>

          <u-form-item
              label="单位"
              :label-width="labelWidth"
              prop="party"
          >
            <u-input placeholder="请输入" input-align="right" :disabled="true" v-model="detailData.unit"  />
          </u-form-item>

          <u-form-item
              label="单价(元)"
              :label-width="labelWidth"
              prop="party"
          >
            <u-input placeholder="请输入" input-align="right" :disabled="!canEdit" v-model="detailData.retailPrice"  />
          </u-form-item>

          <u-form-item
              label="合计(元)"
              :label-width="labelWidth"
              prop="party"
          >
            <view style="position: absolute;right: 0">{{ priceInfo(detailData) }}</view>
          </u-form-item>

          <u-form-item
              label="备注(核价依据)"
              :label-width="labelWidth"
              prop="party"
          >
            <u-input type="textarea" placeholder="请输入" input-align="right" :disabled="!canEdit" v-model="detailData.mome"  />
          </u-form-item>

          <u-row gutter="16" v-if="canEdit">
            <u-col span="6">
              <u-button class="u-btn" type="error" @click="submitBtn('del')">
                删除
              </u-button>
            </u-col>
            <u-col span="6">
              <u-button class="u-btn" type="primary" @click="submitBtn('save')">
                保存
              </u-button>
            </u-col>
          </u-row>
        </u-form>
      </view>
    </u-popup>
  </view>
</template>

<script>
import MListView from "@/components/m-list-view.vue";
import FormSection from "@/components/form-section.vue";
import DicInput from "@/components/dic_input.vue";

export default {
  name: "showDocPriceAuditGoodsInfo",
  components: {
    DicInput,
    MListView,
    FormSection,
  },
  props: {
    caseUuid: {
      type: String,
      default: "",
    },
    height: { // 不能设置100% 之类的。 设置具体 px 数值
      type: Number,
      default: 350, // 默认300 px
    },
    dataFromInit: { // 自定义数据来源
      type: Function,
      default: undefined,
    },
    hasDel: {
      type: Boolean,
      default: false,
    },
    canEdit: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      goodsList: [],
      detailShow: false,
      detailData: {},
      labelWidth: '220',
      labelPosition: 'left',
    }
  },
  computed: {
    goodsTotalNum() {
      let num = 0;
      for (let i = 0; i < this.goodsList.length; i++) {
        try {
          num += Number(this.goodsList[i].qty);
        } catch (er) {
          console.log(er);
        }
      }
      if (this.$u.test.digits(num)) { // 是整数
        return num;
      } else { // 不是整数保留2位小数
        return Number(num.toFixed(2));
      }
    },
    goodsTotalPrice() {
      let totalPrice = 0;
      let realTxt = 0;
      for (let i = 0; i < this.goodsList.length; i++) {
        try {
          let qty = Number(this.goodsList[i].qty);
          let price = Number(this.goodsList[i].retailPrice);
          totalPrice += qty * price;
          if (this.$u.test.digits(totalPrice)) { // 是整数
            realTxt = totalPrice;
          } else { // 不是整数保留2位小数
            realTxt = Number(totalPrice.toFixed(2));
          }
        } catch (er) {
          console.log(er);
          realTxt = 0;
        }
      }
      return realTxt == 0 ? "" : realTxt;
    },
  },
  methods: {
    priceInfo(d) {
      try {
        return (d.retailPrice * d.qty).toFixed(2)
      } catch (err) {
        console.log(err)
      }
      return '';
    },
    itemDetail(obj) {
      this.detailData = this.$u.deepClone(obj);
      this.detailShow = true;
    },
    refreshData(all) {
      this.keyWord = "";
      this.$refs['mescrollRef0'].resetList(true);
    },
    setStaticData(list){
      this.goodsList = this.$u.deepClone(list || []);
      this.$refs['mescrollRef0'].listDatas = this.goodsList;
    },
    getDicName(keyword, code) {
      return this.$u.dic.getDicNameByKeyCode(keyword, code);
    },
    queryData(){
      this.dataFromInit().then(rp => {
        this.goodsList = [...rp.data,];
        let tmpList = [...this.goodsList,];
        this.$refs['mescrollRef0'].listDatas = this.goodsList;

        console.log('1111', this.goodsList)

        this.$emit("needRefresh", true);
      });
    },
    loadData(page, isNeedRefresh) {
      return new Promise((resolve, reject) => {
        if (this.dataFromInit) {
          if (isNeedRefresh) {
            this.dataFromInit().then(rp => {
              this.goodsList = [...rp.data,];
              let tmpList = [...this.goodsList,];
              if (rp.noPage == 1) {
                console.log('tmpList', tmpList)
                resolve({
                  data: [...tmpList,],
                  totalCount: tmpList.length,
                });
              } else {
                console.log('tmpListtmpList', tmpList)
                resolve({
                  data: [...tmpList,],
                  totalCount: rp.total,
                });
              }
              this.$emit("needRefresh", true);
            });
          } else {
            this.dataFromInit().then(rp => {
              this.goodsList = [...rp.data,];
              let tmpList = [...this.goodsList,];
              console.log('tmpListtmpList', tmpList)
              resolve({
                data: [...tmpList,],
                totalCount: tmpList.length,
              });
            });
          }
        }
      });
    },
    delTmp(itm) {
      this.goodsList = this.goodsList.filter(itp => {
        return itm.goodsDtlUuid != itp.goodsDtlUuid;
      });
      this.$refs['mescrollRef0'].listDatas = this.$u.deepClone(this.goodsList);
    },
    getListHeight() {
      return (this.height - 76 - 50) + "px";
    },
    submitBtn(type) {
      if (type === 'del') {
        this.delTmp(this.detailData);
        this.detailShow = false;
      } else if (type === 'save') {
        this.saveTmp(this.detailData);
        this.detailShow = false;
      }
    },
    saveTmp(itm) {
      this.goodsList.forEach((ele) => {
        if (ele.goodsDtlUuid === itm.goodsDtlUuid) {
          ele.retailPrice = itm.retailPrice
          ele.mome = itm.mome
        }
      })
      this.$refs['mescrollRef0'].listDatas = this.$u.deepClone(this.goodsList);
    }
  },
}
</script>

<style lang="scss" scoped>
	@import "../case_common.scss";

	.page {
		padding: 0;
	}

	.total-tip {
		color: $u-tips-color;

		text {
			color: $u-type-warning;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
	}

	.flat-btn {
		position: fixed;
		bottom: 50rpx;
		margin: auto;
		left: 60rpx;
		right: 60rpx;
		z-index: 88;
	}

	.m-is-require {
		color: red;
		margin-left: -8px;
		font-size: 14px;
	}

	.border-left {
		border-left: 1px solid rgb(228, 231, 237);
	}

	.border-Top {
		border-top: 1px solid rgb(228, 231, 237);
	}

	.nwidth {
		width: calc(100% - 80rpx);
	}

	/deep/.u-td {
		white-space: inherit !important;
		height: auto !important;
		line-height: 25px;
	}
</style>
